<template>
  <view class="piaoyiIndexBar">
    <scroll-view class="indexBar" scroll-y="true" :scroll-into-view="activeId">
      <view class="indexBar-item" v-for="(item, name) in cityList" :key="name" :id="name">
        <view class="title">{{ name }}</view>
        <view class="barContent">
          <view class="barContent-item" @tap.stop="selectCity(list)" v-for="(list, index) in item" :key="index">
            {{ list.name }}
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="floatBar">
      <view class="floatBar-item" @click.stop="changePin(item)" v-for="(item, index) in FirstPin" :key="index">
        {{ item }}
      </view>
    </view>
  </view>
</template>

<script>
import { cities } from './city';
export default {
  data() {
    return {
      activeId: '',
      FirstPin: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'J',
        'K',
        'L',
        'M',
        'N',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'W',
        'X',
        'Y',
        'Z',
      ],
      cityList: {},
    };
  },
  mounted() {
    let cityName = {};
    this.FirstPin.forEach((item) => {
      cityName[item] = [];
      cities.forEach((el) => {
        let first = el.pinyin.substring(0, 1).toUpperCase();
        if (first == item) {
          cityName[item].push(el);
        }
      });
    });
    this.cityList = cityName;
  },
  methods: {
    selectCity(list) {
      // uni.showToast({
      //   title: `点击了${list.name}`,
      //   icon: 'none',
      // });
      this.$emit('selectCity', list);
    },
    changePin(item) {
      this.activeId = item;
    },
  },
};
</script>

<style lang="scss" scoped>
.piaoyiIndexBar {
  background: #f4f4f4;
  .indexBar {
    height: calc(100vh - 44px);
    .indexBar-item {
      .title {
        color: #797d82;
        padding-left: 30rpx;
        line-height: 60rpx;
        height: 60rpx;
      }
      .barContent {
        background: #fff;
        padding: 0 40rpx;
        .barContent-item {
          font-size: 28rpx;
          color: #191a1b;
          line-height: 96rpx;
          border-bottom: 1rpx #e1cece solid;
          &:last-child {
            border: none;
          }
        }
      }
    }
  }
  .floatBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 6vh;
    margin: auto 5rpx auto auto;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 780rpx;
    width: 24rpx;
    font-size: 24rpx;
  }
}
</style>
